<template>
  <div class="container" @keydown.enter="login">
    <div class="login">
      <img src="https://cartest.zjcjj.net/logo.png" alt="" />
      <el-form ref="loginForm" :model="form" :rules="rules">
        <el-form-item prop="account">
          <el-input prefix-icon="el-icon-user" v-model="form.account" placeholder="请输入账户"></el-input>
        </el-form-item>
        <el-form-item prop="password">
          <el-input prefix-icon="el-icon-lock" v-model="form.password" placeholder="请输入密码" show-password></el-input>
        </el-form-item>
        <el-form-item class="btns">
         <el-button type="primary" @click="login">登录</el-button><el-button type="text" style="color:white;margin-left:30px" @click="resetForm">重置</el-button>
        </el-form-item>
      </el-form>
    
    </div>
  </div>
</template>
<script>
import{ mapMutations} from 'vuex' 
export default {
  data() {
    return {
      form: {
       account:"",
       password:""
      },
      rules:{
        account:[
          { required: true, message: '请输入用户名称', trigger: 'blur' },
          { min: 6, max: 11, message: '长度在 6 到 11 个字符', trigger: 'blur' }
        ],
        password:[
          { required: true, message: '请输入密码', trigger: 'blur' },
          { min: 6, max: 11, message: '长度在 6 到 11 个字符', trigger: 'blur' }
        ]
      }
    };
  },
  methods: {
    ...mapMutations(["init"]),
     login() {
        this.$refs.loginForm.validate((valid) => {
         if(valid){
             this.$http.post("/sysUser/login",this.form).then((res)=>{
                // console.log(res);
                if(res.data.code===1){
                   this.$message.success(res.data.message)
                     this.$router.replace("/home")
                     //this.$store.commit("init",res.data.object)
                     this.init(res.data.object)
                     localStorage.setItem("currentUser",JSON.stringify(res.data.object))                     
                }else{
                  this.$message.error(res.data.message)
                }
             })
         }
        })
        // console.log(this.form);
      },
    resetForm(){       // 表单重置
      this.$refs.loginForm.resetFields();
      // console.log(this.$refs);
    }
  },
};
</script>
<style scoped lang="scss">
.container {
  background: url("../assets/bannerBg.jpg") no-repeat;
  background-size: cover;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  .login {
    width: 300px;
    height: 300px;
    background: rgba($color: white, $alpha: 0.075);
    display: flex;
    flex-direction: column;
    align-items: center;

    img {
      margin: 15px 0;
      width: 132px;
      height: 104px;
    }
    .btns{
      display: flex;
      justify-content: center;
    }
  }
}
</style>
